<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
  <meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
  <title>小兔鲜儿-新鲜、惠民、快捷！</title>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <!-- 按顺序引入，外链式样式表后写的生效 -->
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 快捷导航 -->
  <div class="navigator">
    <div class="wrapper">
      <ul>
        <li><a href="#">请先登录</a></li>
        <li><a href="#">免费注册</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">会员中心</a></li>
        <li><a href="#">帮助中心</a></li>
        <li><a href="#">在线客服</a></li>
        <li><a href="#"><span></span>手机版</a></li>
      </ul>
    </div>
  </div>

  <!-- 头部 -->
  <div class="header wrapper">
    <div class="logo">
      <h1><a href="#">小兔鲜儿</a></h1>
    </div>
    <div class="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">生鲜</a></li>
        <li><a href="#">美食</a></li>
        <li><a href="#">餐厨</a></li>
        <li><a href="#">电器</a></li>
        <li><a href="#">居家</a></li>
        <li><a href="#">洗护</a></li>
        <li><a href="#">孕婴</a></li>
        <li><a href="#">服装</a></li>
      </ul>
    </div>
    <div class="search">
      <input type="text" placeholder="搜一搜">
      <span></span>
    </div>
    <div class="cart">
      <span>2</span>
    </div>
  </div>

  <!-- banner区域 -->
  <div class="banner">
    <div class="wrapper">
      <ul>
        <!-- 有多少张图，就有多少个li -->
        <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
      </ul>
      <!-- 侧导航 -->
      <div class="aside">
        <ul>
          <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
          <li><a href="#">美食<span>面包 干果</span></a></li>
          <li><a href="#">餐厨<span>数码产品</span></a></li>
          <li><a href="#">电器<span>床品 四件套 被枕</span></a></li>
          <li><a href="#">居家<span>奶粉 玩具 辅食</span></a></li>
          <li><a href="#">洗护<span>洗发 洗护 美妆</span></a></li>
          <li><a href="#">孕婴<span>奶粉 玩具</span></a></li>
          <li><a href="#">服饰<span>女装 男装</span></a></li>
          <li><a href="#">杂货<span>户外 图书</span></a></li>
          <li><a href="#">品牌<span>品牌制造</span></a></li>
        </ul>
      </div>

      <!-- 箭头 -->
      <a href="#" class="prev"></a>
      <a href="#" class="next"></a>

      <!-- 圆点 -->
      <ol>
        <li></li>
        <li></li>
        <li class="current"></li>
        <li></li>
        <li></li>
      </ol>
    </div>
  </div>

  <!-- 新鲜好物 -->
  <div class="goods wrapper">
    <div class="hd">
      <h2>新鲜好物<span>新鲜出炉 品质靠谱</span></h2>
      <a href="#">查看全部 ></a>
    </div>
    <div class="bd clearfix">
      <ul>
        <li>
          <a href="#"><img src="./uploads/new_goods_1.jpg" alt=""></a>
          <h3>睿米无线吸尘器F8</h3>
          <div>￥<span>899</span></div>
          <b>新品</b>
        </li>
        <li>
          <a href="#"><img src="./uploads/new_goods_2.jpg" alt=""></a>
          <h3>智能环绕3D空调</h3>
          <div>￥<span>1299</span></div>
          <b>新品</b>
        </li>
        <li>
          <a href="#"><img src="./uploads/new_goods_3.jpg" alt=""></a>
          <h3>广东软软糯米煲仔饭</h3>
          <div>￥<span>129</span></div>
          <b>新品</b>
        </li>
        <li>
          <a href="#"><img src="./uploads/new_goods_4.jpg" alt=""></a>
          <h3>罗西机械智能手表</h3>
          <div>￥<span>3399</span></div>
          <b>新品</b>
        </li>
      </ul>
    </div>
  </div>

  <!-- 生鲜 -->
  <div class="fresh wrapper">
    <div class="hd">
      <h2>生鲜</h2>
      <a href="#" class="more">查看全部 ></a>
      <ul>
        <li><a href="#">水果</a></li>
        <li><a href="#">蔬菜</a></li>
        <li><a href="#">肉禽蛋</a></li>
        <li><a href="#">裤装</a></li>
        <li><a href="#">衬衫</a></li>
        <li><a href="#">T恤</a></li>
        <li><a href="#">内衣</a></li>
      </ul>
    </div>
    <div class="bd clearfix">
      <div class="left">
        <a href=""><img src="./uploads/fresh_goods_cover.png" alt=""></a>
      </div>
      <div class="right">
        <ul>
          <li>
            <a href="#"><img src="./uploads/fresh_goods_1.jpg" alt=""></a>
            <div class="description">
              <p>美威 智利原味三文鱼排 240g/袋 4片装</p>
              <p>海鲜年货</p>
              <div>￥<span>59</span></div>
            </div>
            <div class="same">
              <div class="top"></div>
              <div class="bottom">
                <a href="#"><p class="one">找相似</p></a>
                <hr>
                <a href="#"><p class="two">发现更多宝贝 ></p></a>
              </div>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh_goods_2.jpg" alt=""></a>
            <div class="description">
              <p>红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>
              <p>火锅食材</p>
              <div>￥<span>79</span></div>
            </div>
            <div class="same">
              <div class="top"></div>
              <div class="bottom">
                <a href="#"><p class="one">找相似</p></a>
                <hr>
                <a href="#"><p class="two">发现更多宝贝 ></p></a>
              </div>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh_goods_3.jpg" alt=""></a>
            <div class="description">
              <p>三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
              <p>海鲜水产</p>
              <div>￥<span>49</span></div>
            </div>
            <div class="same">
              <div class="top"></div>
              <div class="bottom">
                <a href="#"><p class="one">找相似</p></a>
                <hr>
                <a href="#"><p class="two">发现更多宝贝 ></p></a>
              </div>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh_goods_4.jpg" alt=""></a>
            <div class="description">
              <p>渔公码头 大连鲜食入味 即食海参 辽参刺参</p>
              <p>调味海</p>
              <div>￥<span>899</span></div>
            </div>
            <div class="same">
              <div class="top"></div>
              <div class="bottom">
                <a href="#"><p class="one">找相似</p></a>
                <hr>
                <a href="#"><p class="two">发现更多宝贝 ></p></a>
              </div>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh_goods_5.jpg" alt=""></a>
            <div class="description">
              <p>越南白心火龙果4个装 标准果400-550g</p>
              <p>新鲜水果</p>
              <div>￥<span>20</span></div>
            </div>
            <div class="same">
              <div class="top"></div>
              <div class="bottom">
                <a href="#"><p class="one">找相似</p></a>
                <hr>
                <a href="#"><p class="two">发现更多宝贝 ></p></a>
              </div>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh_goods_6.jpg" alt=""></a>
            <div class="description">
              <p>广西沃柑 新鲜水果 柑橘1.5kg</p>
              <p>新鲜水果</p>
              <div>￥<span>10</span></div>
            </div>
            <div class="same">
              <div class="top"></div>
              <div class="bottom">
                <a href="#"><p class="one">找相似</p></a>
                <hr>
                <a href="#"><p class="two">发现更多宝贝 ></p></a>
              </div>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh_goods_7.jpg" alt=""></a>
            <div class="description">
              <p>进口 牛油果 6个装 单果重约130-180g</p>
              <p>新鲜水果</p>
              <div>￥<span>50</span></div>
            </div>
            <div class="same">
              <div class="top"></div>
              <div class="bottom">
                <a href="#"><p class="one">找相似</p></a>
                <hr>
                <a href="#"><p class="two">发现更多宝贝 ></p></a>
              </div>
            </div>
          </li>
          <li>
            <a href="#"><img src="./uploads/fresh_goods_8.jpg" alt=""></a>
            <div class="description">
              <p>泰国进口山竹5A级 500g</p>
              <p>新鲜水果</p>
              <div>￥<span>60</span></div>
            </div>
            <div class="same">
              <div class="top"></div>
              <div class="bottom">
                <a href="#"><p class="one">找相似</p></a>
                <hr>
                <a href="#"><p class="two">发现更多宝贝 ></p></a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- 版权区域 -->
  <div class="footer">
    <div class="wrapper">
      <div class="top">
        <ul>
          <li>
            <!-- 通过伪元素添加标签实现精灵图 -->
            <span>价格亲民</span>
          </li>
          <li>
            <span>物流快捷</span>
          </li>
          <li>
            <span>品质新鲜</span>
          </li>
        </ul>
      </div>
      <div class="bottom">
        <p>
          <a href="#">关于我们</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
          <a href="#">帮助中心</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
          <a href="#">售后服务</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
          <a href="#">配送与验收</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
          <a href="#">商务合作</a>&nbsp;&nbsp;|&nbsp;&nbsp; 
          <a href="#">搜索推荐</a>&nbsp;&nbsp;|&nbsp;&nbsp;
          <a href="#">友情链接</a>
        </p>
        <p>
          CopyRight @ 小兔鲜儿
        </p>
      </div>
    </div>
  </div>
</body>
</html>